<template>
	<view class="nav_outer">
		<!-- <view class="header-l">
			<view>
				<u-icon
					name="arrow-left"
					color="#000"
					size="42"
					style="margin-left: 10rpx"
					@click="handlerChangeHos"
				></u-icon>
			</view>
			<view
				@click="handlerChangeHos"
				style="flex: 1; text-align: center; margin-left: -44rpx"
				>挂号服务</view
			>
		</view> -->
		<view class="tabsStyle"
			><view class="contentTitle">{{ current == 0 ? '专科' : '专病' }}门诊</view
			><u-tabs
				active-color="#5690FB"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				@change="tabChange"
			></u-tabs
		></view>
		<view v-show="current == 0">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList">
				<view
					v-for="(item, index) in list"
					:key="index"
					@click="indexDataClick(index)"
				>
					<u-index-anchor :index="item.letter" />
					<view
						class="list-cell u-border-bottom"
						v-for="(item1, index) in item.data"
						:key="index"
						@click="indexListClick(index)"
					>
						{{ item1.orgName }}
					</view>
				</view>
			</u-index-list>
		</view>
		<view v-show="current == 1">
			<view style="padding: 0 30rpx">
				<u-section
					class="contentList"
					v-for="(item, index) in section"
					:key="index"
					:title="item.name"
					:show-line="false"
					:bold="false"
					sub-title="挂号"
					@click="look(item)"
				></u-section>
			</view>
		</view>
		<view class="safe"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { selectDeptInfo } from '../../http/api.js'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			barStyle: { backgroundColor: '#5690FB' },
			scrollTop: 0,
			indexList: [],
			indexValue: Number,
			list: [],
			tabList: [
				{
					name: '专科',
				},
				// {
				// 	name: '专病',
				// },
			],
			current: 0,
			section: [
				{
					id: 1,
					name: '测试查看',
				},
				{
					id: 2,
					name: '测试查看2',
				},
			],
		}
	},
	computed: {
		...mapState({
			orgId: state => state.orgId,
			curHos: state => state.curHos,
			orgCode: state => state.orgCode,
		}),
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onInit() {},
	created() {
		this.selectDeptInfo()
		if (this.list.length > 0 && Array.isArray(this.list)) {
			this.indexList = this.list.map(val => {
				return val.letter
			})
		}
	},

	onLoad() {},
	methods: {
		// 专科索引列表数据
		selectDeptInfo() {
			selectDeptInfo({
				parentUuid: this.orgId,
				parentOrgName: this.curHos,
			}).then(({ data }) => {
				this.list = data
				console.log(data[0].data, '数据')
				data.map(i => {
					i.letter
					this.indexList.push(i.letter)
				})
			})
		},
		// 获取当前点击的索引赋值通过list数据查找当前点击的内容
		indexListClick(i) {
			this.indexValue = i
		},
		// 获取当前点击的内容
		indexDataClick(i) {
			// console.log(this.list[i].data[this.indexValue].name, '名称')
			// console.log(this.list[i].data[this.indexValue])
			if (this.list[i].data[this.indexValue] != undefined) {
				let clickName = this.list[i].data[this.indexValue]
				let parentOrgName = this.curHos
				console.log(this.list[i].data[this.indexValue], 'id')
				uni.navigateTo({
					url:
						'./specialist_menzhen?parameter=' +
						JSON.stringify(clickName, parentOrgName),
				})
			}
		},
		look(item) {
			uni.navigateTo({
				url: './zhuan_bing?parameter=' + JSON.stringify(item),
			})
		},
		// handlerChangeHos() {
		// 	this.$refs.uToast.show({
		// 		duration: 0,
		// 		isTab: true,
		// 		url: 'pages/index/index',
		// 	})
		// 	console.log('返回')
		// },
		tabChange(index) {
			this.current = index
		},
	},
}
</script>

<style lang="scss">
// page {
// padding-top: 28px;
// }
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: $u-content-color;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}
.tabsStyle {
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid #cccccc;
	padding-right: 48rpx;
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	.contentTitle {
		display: flex;
		flex: 1;
		align-items: center;
		font-size: 33rpx;
		font-weight: bold;
		color: #828282;
		padding-left: 10rpx;
	}
}
.contentList {
	line-height: 70rpx;
}
.header-l {
	padding-top: 12rpx;
	display: flex;
	align-items: center;
	height: 100%;
	// view {
	// 	flex: 1;
	// }
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>
